<template>
  <el-card class="sales">
    <!-- 销售的头部结构 -->
    <template #header>
      <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">销售额</el-menu-item>
        <el-menu-item index="2">访问量</el-menu-item>
      </el-menu>
      <!-- 头部右侧 -->
      <div class="right">
        <el-radio-group v-model="state.time" label="size control">
          <el-radio-button label="今日">今日</el-radio-button>
          <el-radio-button label="本周">本周</el-radio-button>
          <el-radio-button label="本月">本月</el-radio-button>
          <el-radio-button label="本年">本年</el-radio-button>
        </el-radio-group>
        <el-date-picker v-model="state.time2" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" />
      </div>
    </template>
    <!-- 下面的柱状图和右侧的列表项 -->
    <div class="sales-content">
      <v-chart :option="getOption()" autoresize></v-chart>
      <div class="sales-content-list">
        <h4 class="list-title">{{state.activeIndex==='1'?'订单销售额排行':'用户访问量排行'}}</h4>
        <ul>
          <li v-for="rank in rankData" :key="rank.no"><span :class="{'list-no':rank.no<4}">{{rank.no}}</span><span>{{rank.name}}</span><span>{{rank.count}}</span></li>
        </ul>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Sales'
});
</script>
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';
import { useReportDataStore } from '@/stores/reportData';
const reportDataStore = useReportDataStore();
const state = reactive({
  activeIndex: '1',
  time: '本周',
  time2: ''
});

// 使用计算属性来精简数据
// 1. 销售额的X轴数据
const orderFullYearAxis = computed(() => reportDataStore.reportData.orderFullYearAxis);
// 2. 销售额的Y轴数据
const orderFullYear = computed(() => reportDataStore.reportData.orderFullYear);
// 3. 用户访问量X轴数据
const userFullYearAxis = computed(() => reportDataStore.reportData.userFullYearAxis);
// 4. 用户访问量Y轴数据
const userFullYear = computed(() => reportDataStore.reportData.userFullYear);
// 5. 订单销售额排行榜
const orderRank = computed(() => reportDataStore.reportData.orderRank);
// 6. 用户访问量排行榜
const userRank = computed(() => reportDataStore.reportData.userRank);
// 7. 渲染右侧列表的数量 要进行判断
const rankData = computed(() => (state.activeIndex === '1' ? orderRank.value : userRank.value));
const getOption = () => {
  const text = state.activeIndex === '1' ? '订单销售趋势' : '用户访问量趋势';
  return {
    title: {
      text,
      textStyle: {
        fontSize: 14,
        color: '#333'
      },
      left: 10
    },
    xAxis: {
      type: 'category',
      data: state.activeIndex === '1' ? orderFullYearAxis.value : userFullYearAxis.value,
      axisTick: {
        alignWithLabel: true
      }
    },
    color: '#3398DB', 
    yAxis: {

      splitLine: {
        lineStyle: {
          type: 'dotted',
          color: '#ccc'
        }
      }
    },
    grid: {
      left: 50,
      right: 50,
      top: 50,
      bottom: 50
    },
    tooltip: {},
    series: [
      {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data: state.activeIndex === '1' ? orderFullYear.value : userFullYear.value,
        type: 'bar',
        showBackground: true,
        barWidth: '35%',
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };
};

const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];

const handleSelect = (value: string) => {
  // console.log(value);
  state.activeIndex = value; // 为了将来进行切换
};
</script>

<style scoped lang="scss">
.sales {
  margin: 20px 0;
  
  :deep(.el-card__header) {
    position: relative;
    padding: 0 20px;
    border-bottom: none;
    .right {
      position: absolute;
      top: 0;
      right: 20px;
      height: 100%;
      display: flex;
      align-items: center;
      .el-date-editor {
        margin-left: 20px;
      }
    }
  }
  .sales-content {
    height: 270px;
    display: flex;
    .echarts {
      flex: 5;
    }
    .sales-content-list {
      flex: 2;
      .list-title {
        font-size: 14px;
        margin: 20px 0 10px;
      }
      ul {
        list-style: none;
        font-size: 12px;
        padding: 0 20px 0 0;
        li {
          height: 26px;
          line-height: 26px;
          span {
            cursor: pointer;
            &:first-child {
              display: inline-block;
              width: 20px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              margin-right: 10px;
            }
            &.list-no {
              background-color: #000;
              color: #fff;
              border-radius: 50%;
            }
            &:last-child {
              float: right;
            }
          }
        }
      }
    }
  }
}
</style>